<template>
  <div class="header-banner">
    <span
      v-if="showLogo"
      class="iconfont icon-bilibili1 c-#00aeec text-30px"
    ></span>
    <div class="header-banner-left">
      <ul>
        <li>
          <a @click="router.push('/')">
            <span v-if="!showLogo" class="iconfont icon-bilibili-line"></span>
            <span>首页</span>
            <span
              v-if="showLogo"
              class="iconfont icon-jiantoubottom text-13px v-top"
            ></span>
          </a>
        </li>
        <li>
          <a href="#">番剧</a>
        </li>
        <li>
          <a href="#">直播</a>
        </li>
        <li>
          <a href="#">游戏中心</a>
          <div class="game-box">
            <div class="game-box-left">
              <a href="#">
                <img
                  class="game-box-left-top-img"
                  src="../assets/img/home/testData/game-box-left-big-img.jpg"
                  alt=""
                />
              </a>
              <div class="game-box-left-bottom">
                <a href="#">
                  <img
                    class="game-box-left-bottom-img"
                    src="../assets/img/home/testData/game-box-left-bottom-img.png"
                    alt=""
                  />
                  <p>碧蓝航线</p>
                </a>
                <a href="#">
                  <img
                    class="game-box-left-bottom-img"
                    src="../assets/img/home/testData/game-box-left-bottom-img.png"
                    alt=""
                  />
                  <p>碧蓝航线</p>
                </a>
                <a href="#">
                  <img
                    class="game-box-left-bottom-img"
                    src="../assets/img/home/testData/game-box-left-bottom-img.png"
                    alt=""
                  />
                  <p>碧蓝航线</p>
                </a>
              </div>
            </div>
            <div class="game-box-right">
              <div class="game-box-right-game-list-title">新游预告</div>
              <div class="game-box-right-game-list-item">
                <a href="#">仗剑传说</a>
                <a href="#">开放空间</a>
                <a href="#">胜利女神：新的希望</a>
                <a href="#">望月</a>
                <a href="#">苍蓝避风港</a>
                <a href="#">蓝色星原：旅谣</a>
                <a href="#">无限大</a>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a href="#">会员购</a>
        </li>
        <li>
          <a href="#">漫画</a>
          <div class="comic-box">
            <div class="comic-box-left">
              <a href="#">
                <img src="../assets/img/home/testData/comic-box-left-img.png" />
                <p>刀剑神域 Alicization篇</p>
              </a>
              <a href="#">
                <img src="../assets/img/home/testData/comic-box-left-img.png" />
                <p>刀剑神域 Alicization篇</p>
              </a>
              <a href="#">
                <img src="../assets/img/home/testData/comic-box-left-img.png" />
                <p>刀剑神域 Alicization篇</p>
              </a>
              <a href="#">
                <img src="../assets/img/home/testData/comic-box-left-img.png" />
                <p>刀剑神域 Alicization篇</p>
              </a>
            </div>
            <div class="comic-box-right">
              <div class="comic-box-right-comic-list-title">人气漫画</div>
              <div class="comic-box-right-comic-list-item">
                <a href="#">
                  <span>1</span>
                  <span>间谍过家家</span>
                </a>
                <a href="#">
                  <span>2</span>
                  <span>全知读者视角</span>
                </a>
                <a href="#">
                  <span>3</span>
                  <span>碧蓝之海</span>
                </a>
                <a href="#">
                  <span>4</span>
                  <span>航海王</span>
                </a>
                <a href="#">
                  <span>5</span>
                  <span>杀死男主然后成为女魔头</span>
                </a>
                <a href="#">
                  <span>6</span>
                  <span>不小心救了江湖公敌</span>
                </a>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a href="#">赛事</a>
          <div class="contest-box">
            <div class="contest-box-left">
              <img
                src="../assets/img/home/testData/contest-box-left-img-big.png"
                alt=""
              />
              <img
                src="../assets/img/home/testData/contest-box-left-img.jpg"
                alt=""
              />
              <img
                src="../assets/img/home/testData/contest-box-left-img.jpg"
                alt=""
              />
            </div>
            <div class="contest-box-right">
              <p class="contest-box-right-title">热门赛事</p>
              <div class="contest-box-right-top">
                <a href="#">
                  <span>1</span>
                  <span class="iconfont icon-shipin"></span>
                  <span>BLAST里斯本公开赛 ：Spirit vs NAVI</span>
                  <p>BLAST里斯本公开赛 ：Spirit vs NAVI</p>
                  <button>看回放</button>
                </a>
                <a href="#">
                  <span>2</span>
                  <span class="iconfont icon-shipin"></span>
                  <span>BLAST里斯本公开赛 ：MOUZ vs G2</span>
                  <p>BLAST里斯本公开赛 ：MOUZ vs G2</p>
                  <button>看回放</button>
                </a>
                <a href="#">
                  <span>3</span>
                  <span class="iconfont icon-shipin"></span>
                  <span>2025LPL第二赛段 ：RNG vs UP</span>
                  <p>2025LPL第二赛段 ：RNG vs UP</p>
                  <button>看回放</button>
                </a>
              </div>

              <p class="contest-box-right-title">精彩预告</p>
              <div class="contest-box-right-bottom">
                <a href="#">
                  <span>今天 16:00</span>
                  <span>2025LPL第二赛段 ：OMG vs NIP</span>
                  <p>2025LPL第二赛段 ：OMG vs NIP</p>
                  <button>订阅</button>
                </a>
                <a href="#">
                  <span>今天 17:00</span>
                  <span>2025KPL春季赛 ：北京JDG vs 情久</span>
                  <p>2025KPL春季赛 ：北京JDG vs 情久</p>
                  <button>订阅</button>
                </a>
                <a href="#">
                  <span>今天 17:00</span>
                  <span>2025LPL第二赛段 ：RNG vs UP</span>
                  <p>2025LPL第二赛段 ：RNG vs UP</p>
                  <button>订阅</button>
                </a>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a href="#">
            <span class="iconfont icon-xiazai"></span>
            下载客户端
          </a>
          <div class="download-box">
            <div class="download-box-left">
              <p><span class="iconfont icon-mobile-phone"></span> 手机版</p>
              <p>扫码即可下载手机APP</p>
              <img src="../assets/img/home/download-phone-qrcode.png" alt="" />
            </div>
            <div class="download-box-right">
              <p><span class="iconfont icon-diannao_o"></span> Windows端</p>
              <p>适合WIN系统设备</p>
              <!-- <p><span class="iconfont icon-bilibili"></span></p> -->
              <img src="../assets/img/home/bilibili.svg" alt="图标" />
              <a>立即下载</a>
            </div>
            <a class="download-box-bottom" href=""
              >点击查看更多下载内容<span class="iconfont icon-jiantou2"></span
            ></a>
          </div>
        </li>
      </ul>
    </div>
    <div class="header-banner-middle">
      <div class="search-bar">
        <input type="text" class="searchInput" placeholder="deepseek模型训练" />
        <span class="iconfont icon-sousuo"></span>
      </div>
    </div>
    <div class="header-banner-right">
      <ul>
        <li v-if="userStore.isLogin && userStore.userInfo">
          <router-link
            @mouseenter="bigHeadPic = true"
            @mouseleave="bigHeadPic = false"
            :to="'/' + userStore.userInfo.userVo.userId"
          >
            <div
              :style="{
                backgroundImage: `url(${
                  userStore.userInfo.userVo.avatar || defultAvatar
                })`,
              }"
              class="head-pic bg-cover bg-center"
              :class="{ 'head-pic-active': bigHeadPic }"
            ></div>
          </router-link>
          <div
            class="user-info-box"
            @mouseenter="bigHeadPic = true"
            @mouseleave="bigHeadPic = false"
          >
            <p class="user-name">
              {{ userStore.userInfo.userVo.nickName }}
            </p>
            <p class="coins-item">
              <span class="coins-text">硬币：</span>
              <span>{{ userStore.userInfo.balance }}</span>
              <span class="coins-text">B币：</span>
              <span>0</span>
            </p>

            <div class="level-progress-box">
              <div class="level-progress">
                <span
                  :class="`iconfont icon-icon-lv${userStore.userInfo.currentUserLevel}`"
                ></span>
                <div class="level-progress-bac">
                  <div
                    class="level-progress-color"
                    :style="{
                      width: userStore.userInfo.levelProgress + '%',
                    }"
                  ></div>
                </div>
                <span
                  :class="`iconfont icon-icon-lv${userStore.userInfo.nextUserLevel}`"
                ></span>
              </div>
              <p>
                当前成长{{ userStore.userInfo.experience }}，距离升级Lv.{{
                  userStore.userInfo.nextUserLevel
                }}
                还需要{{ userStore.userInfo.upNextExperience }}
              </p>
            </div>

            <div class="counts-item">
              <a href="#">
                <p class="counts-num">{{ userStore.userInfo.followNum }}</p>
                <p class="counts-text">关注</p>
              </a>
              <a href="#">
                <p class="counts-num">{{ userStore.userInfo.fansNum }}</p>
                <p class="counts-text">粉丝</p>
              </a>
              <a href="#">
                <p class="counts-num">
                  {{ userStore.userInfo.dynamicsNum || 0 }}
                </p>
                <p class="counts-text">动态</p>
              </a>
            </div>

            <div class="vip-item">
              <div class="vip-text">
                <p>我的大会员</p>
                <p>热播内容看不停</p>
              </div>
              <div class="vip-text-box">会员中心</div>
            </div>

            <div class="link-item">
              <ul>
                <li>
                  <!-- <a href="#"> -->
                  <router-link to="/user">
                    <div>
                      <span class="iconfont icon-gerenzhongxin"></span>
                      <span>个人中心</span>
                    </div>
                    <span class="iconfont icon-jiantou2"></span>
                  </router-link>
                  <!-- </a> -->
                </li>
                <li>
                  <a href="#">
                    <div>
                      <span class="iconfont icon-tougao"></span>
                      <span>投稿管理</span>
                    </div>
                    <span class="iconfont icon-jiantou2"></span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div>
                      <span class="iconfont icon-tuijian"></span>
                      <span>推荐服务</span>
                    </div>
                    <span class="iconfont icon-jiantou2"></span>
                  </a>
                </li>
                <div class="line"></div>
                <li>
                  <a @click="logout">
                    <div>
                      <span class="iconfont icon-tuichu"></span>
                      <span>退出登录</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li v-else>
          <a href="#" class="login-text">
            <p @click="loginModalStore.visible = true">登录</p>
          </a>
          <div class="login-box">
            <p>登录后你可以：</p>
            <div class="login-box-item">
              <a href="#">
                <span class="iconfont icon-HD"></span>
                <span>免费看高清视频</span>
              </a>
              <a href="#">
                <span class="iconfont icon-lishijilu"></span>
                <span>多端同步播放记录</span>
              </a>
              <a href="#">
                <span class="iconfont icon-bofangqi-danmugundongkai"></span>
                <span>发表弹幕评论</span>
              </a>
              <a href="#">
                <span class="iconfont icon-shipin"></span>
                <span>热门番剧影视看不停</span>
              </a>
            </div>
            <p class="login-but" @click="loginModalStore.visible = true">
              立即登录
            </p>
            <p class="register-item">
              首次使用？ <span class="register-link">点我注册</span>
            </p>
          </div>
        </li>
        <li>
          <a href="#">
            <span class="iconfont icon-big-vip iconfont-header"></span>
            <p>大会员</p>
          </a>
          <div class="vip-box">
            <div class="vip-box-top">
              <a href="#">大会员特权</a>
              <div>
                <a href="#">
                  <span class="iconfont icon-zhuireju"></span>
                  <span>热剧抢先看</span>
                </a>
                <a href="#">
                  <span class="iconfont icon-Free-Tag"></span>
                  <span>会员免费看</span>
                </a>
                <a href="#">
                  <span class="iconfont icon-HD"></span>
                  <span>4K超清画质</span>
                </a>
                <a href="#">
                  <span class="iconfont icon-gexingzhuangban"></span>
                  <span>会员专属装扮</span>
                </a>
              </div>
            </div>
            <div class="vip-box-bottom">
              <div class="vip-box-bottom-left">
                <p>首月15元</p>
                <p>海量热播内容免费看</p>
              </div>
              <div class="vip-box-bottom-right">
                成为大会员
                <div class="vip-box-bottom-tip">限时特惠</div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a href="#">
            <span class="iconfont icon-xiaoxi iconfont-header"></span>
            <p>消息</p>
          </a>
          <div class="msg-box">
            <a href="#">回复我的</a>
            <a href="#">@我的</a>
            <a href="#">收到的赞</a>
            <a href="#">系统消息</a>
            <a href="#">我的消息</a>
          </div>
        </li>
        <li>
          <a href="#">
            <span class="iconfont icon-fengche iconfont-header"></span>
            <p>动态</p>
          </a>
          <div class="dynamics-box">
            <p class="dynamics-box-title">动态</p>
            <div class="dynamics-line">
              <div></div>
              <p>历史动态</p>
              <div></div>
            </div>
            <div class="dynamic-item">
              <img src="../assets/img/home/data-head.jpg" alt="" />
              <div class="dynamic-item-text">
                <p>一枚路过的程序员</p>
                <div>
                  从技术伦理到玄学经济，晨视频对谈AI科普UP主 | 和100个UP主聊聊
                </div>
                <p>1天前</p>
              </div>
              <div></div>
            </div>
            <div class="cat-more">
              <span>查看全部动态</span>
              <span class="iconfont icon-jiantou2"></span>
            </div>
          </div>
        </li>
        <li>
          <a href="#">
            <span class="iconfont icon-shoucang iconfont-header"></span>
            <p>收藏</p>
          </a>
          <div class="collect-box">
            <div class="collect-item">
              <a href="#">
                <span>默认收藏夹</span>
                <span>1</span>
              </a>
              <a href="#">
                <span>稍后再看</span>
                <span>0</span>
              </a>
            </div>
            <div class="collect-box-right">
              <div class="collect-text">
                <div class="collect-text-label">
                  <img
                    src="../assets/img/home/testData/collect-box-text.jpg"
                    alt=""
                  />
                  <div>
                    <div
                      title="降价100元499元起开团联想小新padplus2023评测安兔兔跑分37.4万 已超过小新pad2024综合性能 ，新年福利来啦。"
                      class="video-title"
                    >
                      降价100元499元起开团联想小新padplus2023评测安兔兔跑分37.4万
                      已超过小新pad2024综合性能 ，新年福利来啦。
                    </div>
                    <div class="video-author">
                      <span class="iconfont icon-upzhu"></span>一枚路过的程序员
                    </div>
                  </div>
                </div>
              </div>
              <div class="collect-box-right-bottom">
                <div>查看全部</div>
                <div><span class="iconfont icon-bofang"></span>播放全部</div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a href="#">
            <span class="iconfont icon-lishi iconfont-header"></span>
            <p>历史</p>
          </a>
          <div class="history-box">
            <div class="history-label">
              <div>视频</div>
              <div>直播</div>
              <div>专栏</div>
            </div>
            <div class="history-content"></div>
          </div>
        </li>
        <li>
          <a @click="router.push('/create')">
            <span
              class="iconfont icon-chuangzuozhongxin iconfont-header"
            ></span>
            <p>创作中心</p>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="button-submit color-white">
              <span class="iconfont icon-shangchuan"></span>
              <span>投稿</span>
            </div>
          </a>
          <div class="submit-box">
            <a href="#">
              <span class="iconfont icon-tougao-morenx"></span>
              <p>专栏投稿</p>
            </a>
            <a href="#">
              <span class="iconfont icon-tougao1"></span>
              <p>音频投稿</p>
            </a>
            <a href="#">
              <span class="iconfont icon-tiezhi"></span>
              <p>贴纸投稿</p>
            </a>
            <a href="#">
              <span class="iconfont icon-tougao2"></span>
              <p>视频投稿</p>
            </a>
            <a href="#">
              <span class="iconfont icon-a-zu313"></span>
              <p>投稿管理</p>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/userStore";
import to from "await-to-js";
import { inject, ref } from "vue";
import Login from "./Login.vue";
import { useLoginModalStore } from "@/store/loginModalStore";
import defultAvatar from "@/assets/img/home/data-head.jpg";
import router from "@/router";

const userStore = useUserStore();
let bigHeadPic = ref(false); // 头像放大状态控制
const loginModalStore = useLoginModalStore();

// 退出登录
const logout = async () => {
  const [err] = await to(userStore.logout());
  if (!err) {
    loginModalStore.visible = true;
    router.push("/");
  }
};

// 注入父组件提供的 showLogo，控制是否显示 Logo
const showLogo = inject("showLogo", false);
</script>

<style scoped lang="less">
@import "../assets/styles/header.less";
</style>
